<template>
<div class="container-fluid">
  <div class="row">
    <cate-search-bar></cate-search-bar>
  </div>
  <div class="row">
    <div class="col-md-10 col-md-offset-1">
      <h3>订单信息</h3>
      <table class="table table-condensed table-hover">
        <tbody>
          <tr>
            <td>订单编号：{{ orderDetail.orderCode }}</td>
            <td>
              创建时间：
              {{ orderDate }}
            </td>
          </tr>
          <tr>
            <td>
              订单状态：
              <span id="orderStatus">
                {{ orderStatus }}
              </span>
            </td>
            <td>送货地址：{{ orderDetail.orderAddress }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md-10 col-md-offset-1">
      <div class="panel panel-info">
        <div class="panel-heading">商品列表</div>
        <div class="panel-body">
          <table class="table table-hover table-condensed">
            <thead>
              <tr>
                <th>#</th>
                <th>商品图片</th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>数量</th>
                <th>小计</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item, idx) in orderDetail.odetails"
                :key="item.odetailId"
              >
                <td>{{ idx + 1 }}</td>
                <td>
                  <img
                    :src="SERVER_URL + item.odetailPic"
                    width="30"
                    height="30"
                  />
                </td>
                <td>{{ item.odetailName }}</td>
                <td>
                  单价<span
                    class="glyphicon glyphicon-yen"
                    aria-hidden="true"
                  ></span
                  >{{ item.odetailPrice }}
                </td>
                <td>{{ item.odetailNum }}</td>
                <td>
                  <span
                    class="glyphicon glyphicon-yen"
                    aria-hidden="true"
                  ></span
                  >{{ item.odetailPrice * item.odetailNum }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <table class="table table-condensed">
        <tbody>
          <tr>
            <td class="text-right">
              运费：
              <span class="glyphicon glyphicon-yen" aria-hidden="true"> </span
              >{{ orderDetail.orderPostalfee }}
            </td>
          </tr>
          <tr>
            <td class="text-right">
              订单总金额（含运费）：
              <span class="glyphicon glyphicon-yen" aria-hidden="true"> </span>
              {{ totalFee }}
            </td>
          </tr>
        </tbody>
      </table>
      <form action="" ref="form">
      <input type="hidden" name="oid" :value="orderDetail.orderId">
      <input type="hidden" name="oname" :value="orderDetail.orderCode">
      <input type="hidden" name="money" :value="totalFee">
       <input type="hidden" name="desc" value="">
    </form>
      <div class="col-md-12 text-right">
        <button
          v-if="orderDetail.orderStatus == 0"
          class="btn btn-primary"
          type="button"
          @click="toPay"
        >
          去支付
        </button>
      </div>
    </div>
  </div>
  </div>
</template>
<script>
import { http } from "../utils/http";
import { SERVER_URL } from "../utils/http";
import CateSearchBar from "../components/CateSearchBar.vue";
export default {
  components: {
    CateSearchBar,
  },
  data() {
    return {
      SERVER_URL,
      orderDetail: {},
    };
  },
  computed: {
    orderStatus() {
      let status = "";
      switch (this.orderDetail.orderStatus) {
        case 0:
          status = "等待付款";
          break;
        case 1:
          status = "未发货";
          break;
        case 2:
          status = "已提交退款申请，请等待商家处理";
          break;
        case 3:
          status = "退款成功";
          break;
        case 4:
          status = "已发货";
          break;
        case 5:
          status = "交易成功";
          break;
        case 6:
          status = "已提交退货申请，请等待商家处理";
          break;
        case 7:
          status = "退货中";
          break;
        case 8:
          status = "退货成功";
          break;
        case 9:
          status = "交易关闭";
      }
      return status;
    },
    orderDate() {
      if (this.orderDetail && this.orderDetail.orderDate) {
        return this.orderDetail.orderDate.substring(0, 10);
      } else {
        return "";
      }
    },
    totalFee() {
      let fee = 0;
      if (this.orderDetail.odetails) {
        for (let item of this.orderDetail.odetails) {
          fee = fee + item.odetailPrice * item.odetailNum;
        }
        fee = fee + this.orderDetail.orderPostalfee;
      }
      console.log(fee);
      return fee;
    },
  },
  methods: {
    toPay() {
    let form=this.$refs.form;
    form.action=SERVER_URL+'/pay'
    form.method='post'
    form.submit();
   },
  },
  created() {
    let orderId = this.$route.params.id;
    http
      .get("/order/getOrderDetailById", { params: { orderId } })
      .then((resp) => {
        this.orderDetail = resp.data.orderDetail;
      });
  },
};
</script>